// 优化的三种方法
// 1、shouldComponentUpdate
// 2、pureComponent
// 3、memo
// 2和3：缺点：只能检测第一层数据的改变
import React, { Component , PureComponent ,memo} from 'react'

// 子组件
class Children extends Component{
    shouldComponentUpdate(nextProps){
        if(nextProps.username===this.props.username){
            return false;
        }
        return true;
    }
    render(){
        console.log('子组件')
        // 在子组件中展示username
        return <div>{this.props.username}</div>
    }
    
}

class Count extends Component{
    shouldComponentUpdate(nextProps){
        if(nextProps.count===this.props.count){
            return false;
        }else{
            return true;
        }
    }
    render(){
        console.log('count+1')
        return <div>{this.props.count}</div>
    }
}


class Age extends PureComponent{
    render(){
        console.log('第二种优化方法age')
        return <div>{this.props.age}</div>
    }
}

// 使用memo
const Address = memo((props)=>{
        console.log('第二种优化方法age')
        return <div>{props.address}</div>
})

// 父组件
export default class Parent extends Component {
    // 父组件的初始值
    state={
        username:'张三',
        count:0,
        age:20,
        address:'北京市'
    }
    // add方法
    add=()=>{
        this.setState({
            count:this.state.count+1
        })
    }
    // 改变子组件的名字也就是username的值
    change=()=>{
        this.setState({
            username:"更改之后的名字"
        })
    }
    // 改变年龄
    changeAge=()=>{
        this.setState({
            age:50
        })
    }
    // 改变地址
    changeAddress=()=>{
        this.setState({
            address:'山西省'
        })
    }
    render() {
        console.log('父组件')
        return (
            <div>
                父组件
                <Children username={this.state.username}/>
                <button onClick={this.change}>改变子组件的名字</button>

                <Count count={this.state.count}/>
                <button onClick={this.add}>+</button>

                <br/>

                <Age age={this.state.age}/>
                <button onClick={this.changeAge}>改变年龄</button>

                <Address address={this.state.address}/>
                <button onClick={this.changeAddress}>改变地址</button>
            </div>
        )
    }
}
